iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 4
1
Modern Web

讓0基礎的你也能製作簡單wordpress主題系列 第 4

【Day 4】Html基本結構大分析,讓新手的你也能簡單了解(後篇)

  • 分享至 

  • xImage
  •  

昨天我們大致上地說了<!DOCTYPE html><html></html><head></head>三者的功用,以及內裡常見的內容。今天,我們來討論最後一個項目,< body></body>。它的角色,就等同於速遞包裹裡的貨物,是整個包裹裏最重要的一部分,是html的主要內容,關於網頁基本結構的編碼,大多數都是在這裡。不過html的編碼數量蠻多,不可能盡錄於文章內,所以在這裡,我們將會輯錄一些在製作wordpress,編寫wordpress主題時,最常見到,使用率亦最高的編碼,讓你之後能夠更容易掌握。

網站,一個由長方格組成的世界

在開始之前,我們要先理解一件事,就是網站,其實是又一個個長方格所組成的
我們利用google開發者工具來實證看看吧,這樣大家印象會更深刻點。打開google chorme,去隨便一個網站,然後按滑鼠右鍵,點選檢查,點選指標的圖案,這時候你的指標指向網頁的畫面,就會見到,每個項目都像一樣下圖一樣,是被一個長方格所包圍著的。

網站是一個個的方格組成

Div與span

div和span,是兩個我們平時最常見到的編碼。剛才不是說整個網站都是又方格所組成嗎?而div就可以要來組成那些方格的,看看下面這個例子。

我們進入維基百科,然後打開之前的開發者工具,我們指向文章空白的地方,就會留意到整篇文章都是給div所包裹著

div總是無處不在,哪怕是多文字的wiki,還是會看到他蹤影

不過為什麼會這樣?假如你打開報章,你就會看到,他們每篇文章,都會在一個方格內分隔著彼此。
div和報紙的排版相似,都是擔當著排版的職責

而div做工作的就是類似了,不過這裡有點特別的地方,是div必須要和css合作,才能夠生成,並隨意調整方格,做到像報章般的切版一樣

<div>……</div>

至於span呢?我們在用word檔打報告的時候,假若有文中有部分字眼,需要粗體的時候,我們會先用滑鼠把需要粗體的字highlight,然後再把它調整成粗體,對吧?

span就是在做著highlight的工作,它不會像div那樣,會佔著一整行的空間,它就只是標註著特定位置,然後默默地給予修飾。

<p>xxxx<span>……</span>xxxx</p>

p代表文章,我們下方會提及

P與 H1-H6

只要有文句,這兩個就會出現。p 就是文章 ,最理想的情況,是每一段都用一個p 內包著,這樣就能夠用css做到更細微的調整。情況就好像word檔案裡面一樣,雖說您可以透過空格鍵,(html的編碼為)來分隔段與段之間,但這樣固定了需要間隔最少一行,若透過設定段落間距來,則能夠設定到小數點值,做到更細微的調整

<p>……………….</p>

至於h1至h6,則是標題,數字越大代表字體越大。看下圖:

<h1> 你好 </h1>
<h2> 你好 </h2>
<h3> 你好 </h3>
<h4> 你好 </h4>
<h5> 你好 </h5>
<h6> 你好 </h6>

h1至h6的分別

ul, li 與 ol, li

它們兩個可要來加入列表,前者是點列,而後者則是數字列表。

點列

<ul>
 <li>
 </li>
</ul>

數字列表

<ol>
 <li>
 </li>
</ol>

不過<ul>, <li>還有個意想不到的功用,就是我們可以用它來製作選單。雖說樣子看起來很不像,但對於html來說,選單也是層層遞進,是有連結的列表來的,而, 正好能做到這工作。以往,html是有menu這編碼可用的,但隨著版本的更替,menu已不再可用,取而代之,官方建議使用,

根據w3官方網站,ul和li為更佳的選單顯示方法。

這樣做也有另一個好處,就是能夠讓對於要使用閱讀器的視障人士,更為友善。因為當閱讀器讀到那裏時,可以告訴到用家,這裡是列表,不是一定需要看,讓用家自行判斷。是否需要讀下去。同時因為為列表格式,這樣閱讀器也能夠簡單地數出並說出有多少項,讓用家選擇,要看哪項,提升用戶體驗。

我們來看看wordpress官網,當你用google開發者工具點點看他們的選單,你就會看到,他們也是用ul li

在wiki用的選單,也是用ul、li來顯示

至於如何讓列表向橫,以及讓那些點不顯示?這些就要依靠css

Header footer nav

這三項,和div相近,同樣需要和css合作,才能發揮到作用,做到切版的工作。而他們和div的分別有兩點:

  1. 他們和div不同,有所屬的地方。
  2. 因為表明了那些部分是幹什麼的,這對於要使用閱讀器的視障人士來說,更為友善,他們能更清楚知道網頁的具體結構,並可以直接選看自己想看的部分。而這個特點,也令到開發人員,看編碼時,更容易看

Header

告訴用家或開發者,這部分是頁首。較常見的用法,是用他來包裹著網頁選單,logo等部份。

Header可用作包裹著網頁選單
上圖為bbc新聞網頁,透過google開發者工具,您可以留意到,他的選單和logo,是由header包裹著。

不過除似之外,他還有另一個用法,您可以用它包裹著頁面的標題、作者名稱等。

Header可用作包裹著網頁頁面標題、作者名稱

上圖為wordpress官網,透過google開發者工具,您可以留意到,他中間的標題,是由header包裹著。

Nav


告訴用家或開發者,這部分是選單,不過這不一定要在頁首的選單才能用,只要該選單能夠讓用家瀏覽網站各個頁面,均可以使用

wiki在頁首的nav

上圖為wikipedia官網在頁首部分的nav

apple在頁尾的nav

上圖為apple官網在頁底部分的nav

Footer

告訴用家或開發者,這部分是頁尾。一般而言會包括版權、免責聲明等

wiki在頁尾的footer

上圖為wikipedia官網footer的部分

Img src

假如你需要連接圖片,就會需要用到這個編碼。

基本用法

<img src="111.jpg" alt="" width="50" height="50">

img 比較特別,並不需要</img>來關閉的。

編碼解釋

img src= 代表圖片的位置,可以是網頁連結,也可以是檔案位置

alt為圖片替代文字,可給予使用閱讀器的視障人士,經替代文字,了解圖片內容。同時,由於goolge搜尋器不能分析圖片內容,所以也是依靠著alt來了解圖片。

widthheight並不一定需要,加入後可要來調整圖片大小,不過建議先調整照片後再放上去,因為若透過這裡調整,那麼將會先上載一張過大的照片,接著再調整照片大小,這將會延長了載入時間。

a href

當需要建立超連結,就會用到。這個超連結除了連接去其他網站外,亦可連接到其他html檔案,同一頁面內的其他位置(這個會在class、id裏再說明)等。

基本寫法:

<a href="https://example.com">Website</a>

a href=:這裡可放需要連結的地方。
</a>前:想連結的文字,亦可透過 img src ,讓圖片成為超連結

例子如下:

<a href="https://example.com"><img src="xxx.jpg" alt="" ></a>

Class與 Id

就好像每個人都有名字身份證明文件,來識別你的身份一樣。在html也有,相同的機制,他們就是class和id。Class就好像名字,可以和其他人重複,所以編碼和編碼之間,用的class,是可以相同的。

Id則好像身份證明文件,它是獨一無二的,絕不會出現重複出現,所以在同一個html檔案裏,每個id絕對只能夠使用一次。

不過他們實際有何用途?雖說我們可以透過去指令div,h1等html編碼,來讓css修飾他們。不過問題是,假如你希望不同地方的html編碼,樣式上有著不同的時候,例如希望文章內每個h1都用不同顏色時,單純只是指令那些編碼,就會做不到這效果。這也就是class 和 id 會出現的原因啦。

不過,何時用class 何時用id ?

在選擇時,主要可以考慮以下兩點
1 您希望你的修飾僅出現在這個位置,還是希望在其他地方也可以使用?
2 是否需要設定內連結? id可以用來設定,通常網頁是不是會有一個回到頂部的按鈕,或者在文章內,是不是有一個目錄,直接連接到想看的地方,這些通常都是設定一個連結,然後連接到所屬的id,以做到這效果

例子:

wiki內連結運用了id和#

wikipedia裏的內連結,#代表著需要前往的id,所以這裡它要連的id為行政區域。

然後這裡可以看到在文章內的行政區域標題,id設定為行政區域。

所以當在上面目錄按行政區域時,就會直接鏈接到在寫行政區域的地方

Button

假如需要用到按鈕,那麼就需要用到button

基本寫法:

<button type="button" value="login"> login </button>

編碼分析:

button type: 告訴瀏覽器該按鈕的功能,button代表他只是一個按鈕,暫時沒任何特別功能。除button外,亦可轉換為submit和reset。Submit代表遞交,而rest則代表重設表格內容。

value: 設定按完按鈕後,將會用分類這個遞交的資料,是什麼資料,這有助你之後查閱。

上圖是維基百科登入畫面,這裡可以看到他把value設定為登入,所以當你登入時,系統就會知道,你現在在登入,然後看看有沒有這個用戶,假如正確就會把你傳送到會員畫面。

<!-- -->

能夠作為一個文字描述用,它正常是不會被電腦讀取的,主要是要來幫你去解釋那些編碼是做什麼而用。

例如這樣子:

<!--heading -->

大家之後,也不妨可以加入一些文字描述,這樣能夠防止你之後再回來的時候,忘了自己在幹啥,也能讓之後的開發者,花費更少時間去看你的程式碼(當然,還是要你寫得清晰),也可以作為你的筆記來使用。在之後會介紹的visual studio code,只需要按crtl/or command/就能夠生成了,這功能在css也是有呀,雖然樣子有點不同就是了,是這樣子的/**/。

總結

當然html內裡還有非常多的內容,我們並沒有提及,不過在這兩天文章所提及的知識,已經基本足夠你之後再作wordpress主題了,假如希望詳細了解,可以到mdn web docs,個人認為這網站,比w3chool來得較容易理解。此外,亦可多查閱其他著名網站的程式碼,從中學習。

好了,今天我們就說到這裏了,明天將會帶你去認識一個結合了css、html、javascript的框架:bootstrap,讓不會css的你,也能快速掌握,並更為熟習html。


上一篇
【Day3】Html基本結構大分析,讓新手的你也能簡單了解(前篇)
下一篇
【Day 5】新手也會懂的Bootstrap container 與 flex grid system
系列文
讓0基礎的你也能製作簡單wordpress主題30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言